<div class="container body-content">

    <div class="row">
        <div class="col-md-12">


            <img src="assets/img/logo.png" style="float:left;margin-top:2em;margin-right:2em;height:5em;width:auto;" class="img-circle">
            <h2>Ape Tools - Image Gorilla</h2>
            <p class="lead">Tired of creating all your icons and splashscreen sizes manually? You've come to the right place.</p>
            <p>Upload your Icons and/or Splashscreen and we'll do all the hard work to create the sizes you need for each platform:</p>
            <p>Need to design a logo first? Try <a target="_blank" href="https://logojoy.grsm.io/apetools">Logojoy</a></p>
            <p>Want to quickly make some PNGs (or JPGs) tiny? Check out <a target="_blank"  href="https://www.betweenelements.com/tinypng-app">tinyPNG.App</a></p>
            <div class="row">
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">

                            <h3>Step 1 - Select Your Icon</h3>
                            <div class="input-group file-upload">
                                <input type="file" accept="image/*" id="fileupload-icon" v-on:change="selectionChanged('icon', $event)" name="FileUploadIcon">

                            </div>
                            <p>Select an Icon image in PNG format (transparency allowed) measuring 1024x1024 pixels.</p>


                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <h3>Step 2 - Select Your Splashscreen</h3>
                            <div class="input-group file-upload">
                                <input type="file" accept="image/*" id="fileupload-splash" v-on:change="selectionChanged('splash', $event)" name="FileUploadSplash">
                            </div>
                            <p>Select a Splashscreen image in PNG format (no transparency) measuring 4096*4096 pixels with the
                                important stuff centred, we'll then resize from the centre outwards, sampling the top left
                                corner colour as background. <span class="sample-swatch" :style="sampleStyle">&nbsp;</span></p>


                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-md-12">

                </div>
            </div>

            <div v-if="selectedIconFile || selectedSplashFile">

                <h4 class="clearfix" style="clear: left">Step 3 - Where the magic happens</h4>

                <p v-if="!isProcessing && !isArchiveReady" class="alert alert-info">
                    Ready to Punch It?
                    <button type="button" v-on:click="process" class="btn btn-primary btn-lg">
                        <i class="fa fa-thumbs-up" aria-hidden="true"></i> Kapow!</button>


                        <input type="checkbox" :id="showPreviews" v-model="showPreviews">
                        <label for="checkbox"> show previews</label>
                </p>

                <p v-if="isProcessing">
                    <i class="fa fa-spinner fa-spin fa-3x fa-fw" aria-hidden="true"></i>
                    {{msg}}
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" v-bind:style="{ width: processingProgress + '%' }">
                            <span class="sr-only">Processing {{processingProgress}}% Complete</span>
                        </div>
                    </div>
                </p>

                <div v-if="isArchiveReady">
                    <button class="btn btn-primary btn-lg" v-on:click="downloadZip">Download Zip</button>
                    <a href="https://apetools.webprofusion.com">Try Again</a>

                </div>

                <p>We will generate an asset bundle you can download for the following platforms:</p>

                <div v-for="platform of allPlatforms" style="width:300px; min-height:100px;display:inline-block; border:1px solid gainsboro; box-shadow: #c0c0c0 2px 2px;padding:1em;margin:1em;;">
                    <h3>
                        <i class="fa fa-lg fa-fw" v-bind:class="platform.icon"></i> {{platform.title}}</h3>
                    <p class="lead">{{platform.bundleSpecs.filter(f=>f.category=='icon')[0].imageSet.length}} icon sizes, {{platform.bundleSpecs.filter(f=>f.category=='splash')[0].imageSet.length}}
                        splashscreen sizes. </p>

                    <input type="checkbox" :id="platform.path" v-model="platform.includeInBundle">
                    <label for="checkbox"> include in bundle </label>

                    <div v-if="platform.includeInBundle">
                        <p>{{platform.instructions}}</p>
                        <div v-if="showPreviews">
                            <div v-for="bundle of platform.bundleSpecs">
                                <h2>{{bundle.category}}</h2>

                                <ul class="list-group" v-for="fileSpec of bundle.imageSet">
                                    <li class="list-group-item">{{fileSpec.path}} {{fileSpec.prefix}} {{fileSpec.idiom}} {{fileSpec.fileName}}: {{fileSpec.width*fileSpec.scale}}x{{fileSpec.height*fileSpec.scale}}
                                        <img v-if="fileSpec.imgData" :src="fileSpec.imgData" style="max-width: 200px; max-height:200px;" class="img-thumbnail">

                                    </li>
                                </ul>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="well well-sm">
            <p> We'd really appreciate it if you could tell others about this app:
                <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://apetools.webprofusion.com" data-text="Check out Ape Tools, the quick way to generate all the icons and splash screens for your app:"
                    data-via="webprofusion">Share</a>
            </p>



        </div>
    </div>

</div>

</div>
